<template>
  <div class="search-result">
    <div class="search-box">

      <div class="searchhot-top">
        <div @click="leftBtn" class="arrow-left">
          <img src="../../images/jiantou.png" alt="">
        </div>
        <search
          :inputval="titleLike"
          @textChange="textChangeText"
          v-bind:show="searchshow"
        />
      </div>
      <div
        class="goodslist"
        v-show="!searchshow"
      >商品名称</div>
      <div
        class="right"
        @click="tosearch()"
        v-show="searchshow"
      >搜索</div>
      <div
        class="right"
        @click="tosearch()"
        v-show="!searchshow"
      ><img
          :src='img6'
          alt=""
        >
      </div>

    </div>

    <div class="search-item">
      <div
        v-for="(item,index) in filterArr"
        :key="index"
        :class="['search-item-keyword',{'active':selectVal == item.value}]"
        @click="selectType(item.value)"
      >
        {{item.name}}
        <img
          v-if="index == 0"
          class="item_img1"
          src="../../images/fenlei@2x.png"
          alt=""
        >
        <img
          v-if="index == 2"
          class="item_img2"
          :src="typeVal=='priceAsc'? img1:img2"
          alt=""
        >
      </div>
      <div
        class="search-item-keyword"
        data-id="select"
        @click="select()"
        :class="{active:shows==4}"
      >筛选</div>
    </div>
    <div class="recommend">
      <div
        v-for="(item,index) in cateParentArr"
        :key="index"
        @click="linkTo('/goods_container',item.id)"
        class="recommend-item"
      >
        <div
          :style="{backgroundImage:'url(' +item.imageUrls[0].fileUrl+')'}"
          class="recommend-item-img"
        />
        <div class="item-detail">
          <div class="text1">{{item.title||''}}</div>
          <div class="prices box">
            <div class="text2">
              <div class="text2-yuan">{{returnName(item.productType)}}</div>
              <div class="text2-price">{{item.salePrice||''}}</div>
            </div>
            <div class="text3">
              <div class="text3-price"></div>
              <div class="text3-number">{{item.productType != 'GOLD'?'销量':'兑换数量'}}：{{item.saleCount||0}}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div
      v-if="!cateParentArr.length"
      class="no-data"
    >
      当前商品列表为空~
    </div>
    <div
      class="aside-select"
      v-show="asideShow"
     >
      <div
        class="select_mask"
        @click="hide()"
      ></div>
      <div class="select_container">

        <div class="select_content">
          <div class="select_content-item">
            <div class="price-range">
              价格区间
            </div>
            <div class="spread-icon"><img
                :src=img4
                alt=""
              ></div>
          </div>
          <div class="select_content-item">
            <input
              v-model="salePriceGt"
              class="price-input"
              placeholder="最低价"
            />
            <input
              v-model="salePriceLt"
              class="price-input"
              placeholder="最高价"
            />
          </div>
          <div class="select_content-item">
            <div class="price-range">
              分类
            </div>
            <div class="spread-icon">更多<img
                :src="spread==true? img4:img5"
                alt=""
                @click="spreadIcon()"
              ></div>

          </div>
          <div class="select_content-item2">
            <div
              v-if="index<=maxLength"
              class="item-detail"
              :class="{selected:item.id==cateId}"
              v-for="(item,index) in cateArr"
              :key="index"
              @click="changeClass(item.id)"
            >{{item.categoryName}}</div>

          </div>
          <div
            v-if="cateChildArr.length"
            class="select_content-item"
           >
            <div class="price-range">
              分类
            </div>
            <div @click="spreadIcon1()" class="spread-icon">更多<img
                :src="spread1==true? img4:img5"
                alt=""
                
              ></div>

          </div>
          <div
            v-if="cateChildArr.length"
            class="select_content-item2"
          >
            <div
              v-if="index<=maxLength1"
              class="item-detail"
              :class="{selected:item.id==cateChildId}"
              v-for="(item,index) in cateChildArr"
              :key="index"
              @click="changeClass(item.id,true)"
            >{{item.categoryName}}</div>
          </div>
          <div
            v-if="cateChildArr.length"
            class="select_content-item"
           >
            <div class="price-range">
              分类
            </div>
            <div class="spread-icon">更多<img
                :src="spread2==true? img4:img5"
                alt=""
                @click="spreadIcon2()"
              ></div>

          </div>
          <div
            v-if="cateSecondChildArr.length"
            class="select_content-item2"
          >
            <div
              v-if="index<=maxLength2"
              class="item-detail"
              :class="{selected:item.id==cateSecondChildId}"
              v-for="(item,index) in cateSecondChildArr"
              :key="index"
              @click="changeClass(item.id,'second')"
            >{{item.categoryName}}</div>
          </div>
        </div>
        <div
          class="reset"
          @click="reset()"
        >重置</div>
        <div
          class="confirmBtn"
          @click="hide(true)"
        >确定</div>
      </div>
    </div>
    <tabbar :activeIndex="2" v-if="type"></tabbar>
  </div>
</template>
<script>
import tabbar from "../common/tabbar";
import search from "@/components/common/search.vue";
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
export default {
  name: "searchResult",
  components: {
    search,
    tabbar
  },
  data() {
    return {
      id: "",
      type:'',
      parentId: "",
      filterArr: [
        {
          name: "综合",
          value: "referenceDesc"
        },
        {
          name: "销量",
          value: "collectionDesc"
        },
        {
          name: "价格",
          value: "price"
        }
      ],
      titleLike: "",
      selectVal: "referenceDesc",
      typeVal: "",
      cateParentArr: [],
      shows: 1,
      range: true,
      spread: true,
      spread1: true,
      spread2:true,
      categore: 0,
      asideShow: false,
      searchshow: true,
      img1: require("../../images/jiage@2x.png"),
      img2: require("../../images/jiageb@2x.png"),
      img3: require("../../images/fenlei@2.png"),
      img4: require("../../images/fanhui_xia@2x.png"),
      img5: require("../../images/fanhui_shang@2x.png"),
      img6: require("../../images/sousuo@2x.png"),
      cateArr: [],
      cateId: "",
      maxLength: 3,
      maxLength1: 3,
      maxLength2: 3,
      cateChildId: "",
      cateSecondChildId:'',
      cateChildArr: [],
      salePriceGt:'',
      salePriceLt:'',
      cateSecondChildArr:[],
      pageIndex:1,
      pageCount:0,
      liveState: false,
    };
  },
  created(){
    let { id, name, parentId, text,type } = this.$router.currentRoute.query;
    this.id = id;
    this.type = type
    this.parentId = parentId;
    this.titleLike = text;
    this.$vux.loading.show({
      text: "加载中"
    });
    this.getList();
    document.title = name || "商品列表";
    this.cateGory();
  },
  mounted() {
    let that = this;
    window.addEventListener("scroll", function (val) {
      var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//滚动条距离顶部的高度
      var scrollHeight = document.body.scrollHeight;
      if (that.liveState) return; //当前页面的总高度
      console.log(val,scrollTop,scrollHeight)
      if (scrollTop*2+200 >= scrollHeight) {
        if (that.pageCount <= that.pageIndex) return;
        that.pageIndex++;
        that.liveState = true;
        that.getList();
      } else if (scrollTop <= 0) {
      }
    });
  },
  methods: {
    leftBtn(){
      this.$router.back(-1)
    },
    returnName(val){
      let str;
      if(val == 'RMB'){
        str = '¥  '
      }else if(val == 'GOLD'){
        str = '红包:'
      }else if(val == 'RMB_ORDINARY'){
        str = '¥  '
      }else {
        str = '红包:'
      }
      return str
    },
    textChangeText(val){
      this.titleLike = val
    },
    cateGory() {
      let param = {
        isEnable: "y",
        pageIndex: 1,
        pageSize: 1000,
        parentId: 0
      };
      let url = CONSTANT.LIST.CATEGORYLIST;
      common.post(url, param, res => {
        if (res.code == 200) {
          this.cateArr = res.data.bussData;
        }
      });
    },

    linkTo(path, id) {
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      });
    },
    getList() {
      let { all } = this.$router.currentRoute.query;
      let type;
      if(all == 'all'){
        type = ''
      }else{
        type = this.type?'RMB':'GOLD'
      }
      type = all == 'RMB_ORDINARY'?all:type
      let param = {
        category: this.id,
        categoryParent: this.parentId,
        orderBy: this.typeVal,
        pageSize: 10,
        pageIndex: this.pageIndex,
        titleLike: this.titleLike,
        salePriceGt :this.salePriceGt,
        salePriceLt :this.salePriceLt,
        productType:type,
        orderBy:this.typeVal
      };
      let url = CONSTANT.LIST.PRODUCTPAGE;
      common.post(url, param, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          this.pageCount = res.data.pageCount
          this.cateParentArr = this.cateParentArr.concat(res.data.bussData);
          this.liveState = false;
        }
      });
    },
    selectType(val) {
      this.selectVal = val;
      if (val == "price") {
        this.typeVal = this.typeVal == "priceAsc" ? "priceDesc" : "priceAsc";
      } else if (val == 'referenceDesc') {
        this.typeVal = 'referenceDesc'
      }else if(val == 'collectionDesc'){
        this.typeVal = 'sellCountDesc'
      }
      this.pageIndex = 1
      this.cateParentArr = []
      this.getList();
    },

    fenlei() {
      this.shows = 1;
    },
    number() {
      this.shows = 2;
    },
    price() {
      this.shows = 3;
    },
    select() {
      this.shows = 4;
      this.asideShow = !this.asideShow;
    },
    toggleUrl() {
      this.range = !this.range;
    },
    changeClass(id, state) {
      if (state == 'second') {
        this.cateSecondChildId = id;
        return;
      }
      if (state) {
        this.cateChildId = id;
        this.cateParentClick(id);
        return;
      }
      this.cateId = id;
      this.cateClick(id);
    },
    cateParentClick(id) {
      let param = {
        isEnable: "y",
        pageIndex: 1,
        pageSize: 1000,
        parentId: id
      };
      let url = CONSTANT.LIST.CATEGORYLIST;
      common.post(url, param, res => {
        if (res.code == 200) {
          this.cateSecondChildArr = res.data.bussData;
        }
      });
    },
    cateClick(id) {
      let param = {
        isEnable: "y",
        pageIndex: 1,
        pageSize: 1000,
        parentId: id
      };
      let url = CONSTANT.LIST.CATEGORYLIST;
      common.post(url, param, res => {
        if (res.code == 200) {
          this.cateChildArr = res.data.bussData;
        }
      });
    },
    tosearch() {
      this.pageIndex = 1
      this.cateParentArr = []
      this.getList()
      // if(this.titleLike){
      //   this.getList();
      // }else{
      //   this.searchshow = !this.searchshow;
      // }
    },
    hide(state) {
      if (state) {
        this.parentId = this.cateChildId;
        this.id = this.cateSecondChildId;
        this.pageIndex = 1
        this.cateParentArr = []
        this.getList();
      }
      this.asideShow = !this.asideShow;
    },
    reset(){
      this.maxLength = 3;
      this.maxLength1 = 3;
      this.cateId = '';
      this.cateChildId = '';
      this.cateSecondChildId = '';
      this.spread = true
      this.spread1 = true
      this.spread2 = true
      this.cateChildArr = []
      this.cateSecondChildArr = []
      this.salePriceGt  = ''
      this.salePriceLt  = ''
    },
    spreadIcon() {
      this.spread = !this.spread;
      if (this.spread) {
        this.maxLength = 3;
      } else {
        this.maxLength = 10000;
      }
    },
    spreadIcon1() {
      this.spread1 = !this.spread1;
      if (this.spread1) {
        this.maxLength1 = 3;
      } else {
        this.maxLength1 = 10000;
      }
    },
    spreadIcon2() {
      this.spread2 = !this.spread2;
      if (this.spread2) {
        this.maxLength2 = 3;
      } else {
        this.maxLength2 = 10000;
      }
    }
  }
};
</script>
<style lang="less">
.search-result {
  min-height: 100%;
  background: rgba(247, 247, 247, 1);
  position: relative;
  box-sizing: border-box;
  overflow-x: hidden;
  .search-box {
    box-sizing: border-box;
    background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
    width: 100%;
    height: 0.94rem;
    display: flex;
    align-items: center;
    .left-img {
      display: inline-block;
      position: absolute;
      width: 0.18rem;
      height: 0.32rem;
      margin-left: 0.24rem;
      margin-bottom: 0.27rem;
    }
    .searchhot-top {
      position: relative;
      display: flex;
      align-items: center;
      height: 0.6rem;
      margin-left: 0.7rem;
      .arrow-left{
        position: absolute;
        left: -.6rem;
        top: .05rem;
        height: .9rem;
        width: 1rem;
        z-index: 99;
        img{
          height: .5rem;
          width: .5rem;
        }
      }
    }
    .goodslist {
      position: absolute;
      left: 50%;
      margin: 0;
      transform: translateX(-50%);
      line-height: 0.36rem;
      margin: 0;
      height: 0.34rem;
      font-size: 0.36rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
    .right {
      position: absolute;
      right: 0.28rem;
      height: 0.28rem;
      font-size: 0.3rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 0.28rem;
      img {
        width: 0.32rem;
        height: 0.32rem;
      }
    }
  }

  .search-item {
    width: 7.5rem;
    height: 0.88rem;
    background: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.22rem;
    .line-item {
      flex: 1;
      width: 33.3%;
      height: 0.4rem;
      border-right: 0.01rem;
      border-right-color: rgba(188, 188, 188, 1);
      opacity: 0.7;
    }
    .search-item-keyword {
      margin: 0.31rem 0;
      height: 0.4rem;
      display: flex;
      margin-left: 0;
      margin-right: 0;
      flex: 1;
      justify-content: center;
      font-size: 0.28rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(136, 136, 136, 1);
      line-height: 0.4rem;
      border-right: 0.01rem solid rgba(188, 188, 188, 0.7);
      align-items: center;
      .item_img1 {
        width: 0.22rem;
        height: 0.23rem;
        margin-right: 0.11rem;
      }
      .item_img2 {
        display: block;
        height: 0.26rem;
        width: 0.16rem;
        margin-left: 0.12rem;
      }
    }
    .search-item-keyword:nth-of-type(4) {
      border: none;
    }
    .active {
      .search-item-keyword;
      color: #FF7268;
    }
  }
  .aside-select {
    position: fixed;
    overflow: scroll;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    .select_mask {
      width: 100%;
      height: 100vh;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 2;
      transform: translateX(-50%);
    }

    .select_container {
      width: 100%;
      z-index: 200;
      height: 100%;
      overflow: scroll;
      // overflow-x: hidden;
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(255, 255, 255, 1);
      width: 5.6rem;
      border-radius: 0.1rem;

      .select_content {
        overflow: scroll;
        position: relative;
        visibility: visible;
        // max-height: 80rem;
        padding: 0 0.5rem 3rem;
        padding-top: 30px;
        .select_content-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          .price-range {
            height: 0.26rem;
            font-size: 0.28rem;
            font-family: PingFang-SC-Regular;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 0.3rem;
            margin-bottom: 0.52rem;
          }
          .spread-icon {
            margin-bottom: 0.52rem;
            height: 0.23rem;
            font-size: 0.24rem;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
            line-height: 0.3rem;

            img {
              margin-left: 0.12rem;
              width: 0.24rem;
              height: 0.14rem;
            }
          }
        }
        .select_content-item2 {
          display: inline-block;
          .item-detail {
            box-sizing: border-box;
            display: inline-block;
            width: 2.1rem;
            height: 0.98rem;
            background: rgba(246, 246, 248, 1);
            border: 0.01rem solid rgba(218, 218, 218, 1);
            border-radius: 0.04rem;
            font-size: 0.28rem;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 0.98rem;
            text-align: center;
            margin-bottom: 0.6rem;
            &:nth-child(2n){
              margin-left: .32rem;
            }
          }
          .selected {
            box-sizing: border-box;
            border: 1px solid rgba(126, 86, 198, 1);
            background: rgba(246, 246, 248, 1) url(../../images/fenlei@2.png)
              no-repeat bottom right;
            background-size: 0.33rem 0.33rem;
          }
          // .item-detail:nth-child(even) {
          //   float: right;
          // }
        }
        // .select_content-item2:nth-last-child(1) {
        //   margin-bottom: 1rem;
        // }

        input::-webkit-input-placeholder {
          color: rgba(153, 153, 153, 1) !important;
        }
        .price-input {
          outline: none;
          appearance: none;
          border: none;
          padding: 0;
          width: 2.1rem;
          height: 0.98rem;
          background: rgba(246, 246, 248, 1);
          border: 1px solid rgba(218, 218, 218, 1);
          border-radius: 0.04rem;
          font-size: 0.28rem;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          color: rgba(34, 34, 34, 1);
          line-height: 0.3rem;
          text-align: center;
          margin-bottom: 0.9rem;
        }
      }
    }

    .reset {
      position: fixed;
      bottom: .99rem;
      float: left;
      width: 2.3rem;
      height: 0.98rem;
      background: rgba(244, 244, 244, 1);
      font-size: 0.3rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(119, 119, 119, 1);
      line-height: 0.98rem;
      text-align: center;
      box-sizing: border-box;
    }
    .confirmBtn {
      bottom: .99rem;
      .reset;
      width: 3.3rem;
      right: 0;
      color: rgba(255, 255, 255, 1);
      background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
    }
  }
  .recommend {
    width: 7.5rem;
    background: rgba(247, 247, 247, 1);
    padding-left: 0.18rem;
    box-sizing: border-box;
    padding-bottom: 1rem;
    .recommend-item {
      display: inline-block;
      vertical-align: top;
      position: relative;
      width: 3.42rem;
      background: rgba(255, 255, 255, 1);
      margin-bottom: 0.2rem;
      margin-right: 0.18rem;
      .recommend-item-img {
        box-sizing: border-box;
        margin: 0 0 0.09rem 0;
        width: 100%;
        height: 3.42rem;
        background-size: 100% 100%;
      }

      .item-detail {
        display: flex;
        flex-direction: column;
        // position: absolute;
        // bottom: 0.2rem;
        height: 1.5rem;
        .prices{
          justify-content: space-between;
          align-items: center;
        }
        .text1 {
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin-left: 0.12rem;
          height:0.6rem;
          width: 3.05rem;
          overflow: hidden;
          font-size: 0.27rem;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 0.32rem;
          margin-bottom: 0.3rem;
        }
        .text2 {
          display: inline-block;
          margin-left: 0.12rem;
          display: flex;
          align-items: center;
          margin-bottom: 0;

          .text2-yuan {
            display: inline-block;
            font-size: 0.2rem;
            font-family: PingFang-SC-Medium;
            color: #FF7268;
            line-height: 0.16rem;
            margin-right: 0;
          }
          .text2-price {
            position: relative;
            top: -.02rem;
            display: inline-block;
            font-size: 0.32rem;
            font-family: PingFang-SC-Bold;
            font-weight: bold;
            color: #FF7268;
            margin-left: .1rem;
            line-height: 0.25rem;
          }
        }
        .text3 {
          display: flex;
          font-display: row;
          margin-left: 0.12rem;
          .text3-price {
            font-size: 0.22rem;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            text-decoration: line-through;
            color: rgba(153, 153, 153, 1);
            line-height: 0.19rem;
          }
          .text3-number {
            // position: absolute;
            // right: 0;
            font-size: 0.22rem;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            text-align: center;
          }
        }
      }
    }
    // .recommend-item:nth-child(1) {
    //   height: 4.5rem;
    //   .recommend-item-img:nth-child(1) {
    //     width: 3.42rem;
    //     height: 2.6rem;
    //     border-radius: 0.04rem 0.04rem 0 0;
    //     margin: 0;
    //   }
    // }

    // .recommend-item:nth-of-type(2n + 3) {
    //   vertical-align: top;
    //   transform: translateY(-.7rem);
    // }
  }
}
</style>
